<template>
  <div class="hello">
    <div class="header">
      <h1>{{ msg }}</h1>
      <el-button type="primary" plain class="btn" @click="uploaddialog = true">上传图片</el-button>
    </div>
    <div class="imgBox">
      <!-- <img alt="Vue logo" src="../assets/logo.png" class="img"> -->
      <div v-for="file in currentList" :key="file.name" class="img">
        <!-- <el-image style="width: auto;height: auto;max-width: 100%;max-height: 100%;" :src="file.url"></el-image> -->
        <el-image style="height: 200px;" :src="file.url"></el-image>

        <div class="icon">
          <span class="msg">{{ file.originalFilename }}</span>
          <span class="msg">{{ file.mimetype }}</span>
          <span class="msg">{{ file.size }}</span>
          <div class="iconbtn">
            <span @click="handlePictureCardPreview(file)" class="magnify">
              <i class="el-icon-zoom-in"></i>
            </span>
            <span v-if="!disabled" @click="handleRemove(file)" class="delete">
              <i class="el-icon-delete"></i>
            </span>
          </div>
        </div>

      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <el-dialog title="To upload your files!" :visible.sync="uploaddialog" width="60%">
      <UploadFiles @transfer="change" />
      <!-- 子组件向父组件传参 -->
    </el-dialog>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import UploadFiles from './UploadFiles.vue'
export default {
  name: 'HelloWorld',
  components: {
    UploadFiles,
  },
  data() {
    return {
      msg: 'welcome,在这里你可以查看上传的图片!',
      dialogImageUrl: '',
      dialogVisible: false,
      uploaddialog: false,
      disabled: false,
      fileList: [],
      total: 1,
      currentPage: 1,
      pageSize: 10,
      currentList: [],
    }
  },
  methods: {
    async getList() {
      let res = await this.$axios.get('/getfiles');
      // console.log(res);
      let list = res.result.map(item => {
        // return { name: item, url: `http://localhost:3000/getfiles/${item}` }
        return { ...item, url: `http://localhost:3000/getfiles/${item.originalFilename}` }
      })
      this.fileList = list;
      this.total = list.length
      // console.log(list);
    },
    async handleRemove(file) {
      let result = await this.$axios.post('/delfile', { fileName: file.originalFilename });
      // console.log(result);
      if (result.ok) {
        this.fileList = this.fileList.filter(item => file.originalFilename !== item.originalFilename)
        this.total = this.fileList.length
        this.currentList = this.fileList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        this.$message({
          message: result.msg,
          type: 'success'
        });
      } else {
        this.$message.error(result.msg)
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.currentList = this.fileList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.currentList = this.fileList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    async change(msg) {
      if (msg) {
        this.uploaddialog = false;
        let res = await this.$axios.get('/getfiles');
        let list = res.result.map(item => {
          return { ...item, url: `http://localhost:3000/getfiles/${item.originalFilename}` }
        })
        this.fileList = list;
        this.total = list.length
        this.currentList = this.fileList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
      }
    }
  },
  async mounted() {
    this.$emit("transfer", this.msg);
    // let res = await this.$axios.get('/getfiles');
    // let list = res.result.map(item => {
    //   return { ...item, url: `http://localhost:3000/getfiles/${item.originalFilename}` }
    // })
    // this.fileList = list;
    // this.total = list.length
    // this.currentList = this.fileList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.btn {
  display: block;
  margin-left: 100px;
  width: 100px;
  height: 40px;
}

.imgBox {
  width: 1200px;
  min-height: 450px;
  margin: 20px auto;
  border: 4px dashed #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.img {
  position: relative;
  margin: 10px;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  overflow: hidden;
}

.icon {
  display: none;
  color: #fff;
}

.img:hover .icon {
  position: absolute;
  left: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, .3);
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.delete,
.magnify {
  cursor: pointer;
  margin: 20px;
}

.iconbtn {
  margin-top: 20px;
}

.msg {
  margin: 5px;
}
</style>
